<template>
  <el-dialog :title="!dataForm.id ? '新增' : '修改'" :close-on-click-modal="false" :visible.sync="visible">
    <el-form :model="dataForm" :rules="dataRule" ref="dataForm" @keyup.enter.native="dataFormSubmit()"
      label-width="120px">
      <el-form-item label="大赛类型" prop="projectId">
        <el-select v-model="dataForm.projectId" clearable placeholder="请选择">
          <el-option v-for="k in projectList" :key="k.id" :label="k.name" :value="k.id">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="结题/延期" prop="conclusionPostpone">
        <el-radio-group v-model="dataForm.conclusionPostpone">
          <el-radio :label="'结题'">结题</el-radio>
          <el-radio :label="'延期'">延期</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="材料类型声明" prop="material">
        <!-- <el-input v-model="dataForm.material" placeholder="输入材料类型声明"></el-input> -->

        <el-tag style="margin:0 2px;" :key="k" v-for="k in dataForm.material" closable :disable-transitions="false"
          @close="handleClose(k)">
          {{ k }}
        </el-tag>
        <el-input v-if="inputVisible" v-model="inputValue" ref="saveTagInput" size="small"
          @keyup.enter.native="handleInputConfirm" @blur="handleInputConfirm" style="width: 100px;">
        </el-input>
        <el-button v-else class="button-new-tag" type="primary" size="small" @click="showInput"
          style="font-size: 12px;">{{ '添加类型' }} <span class="el-icon-circle-plus"></span> </el-button>

      </el-form-item>
    </el-form>
    <span slot="footer" class="dialog-footer">
      <el-button @click="visible = false">取消</el-button>
      <el-button type="primary" @click="dataFormSubmit()">确定</el-button>
    </span>
  </el-dialog>
</template>

<script>
export default {
  data() {
    return {
      visible: false,
      projectList: [],
      dataForm: {
        id: 0,
        projectId: '',
        conclusionPostpone: '',
        material: [],
      },
      inputVisible: false,
      inputValue: '',
      dataRule: {
        projectId: [
          { required: true, message: '不能为空', trigger: 'blur' }
        ],
        conclusionPostpone: [
          { required: true, message: '不能为空', trigger: 'blur' }
        ],
        material: [
          { required: true, message: '不能为空', trigger: 'blur' }
        ]
      }
    }
  },
  mounted() {
    this.getProjectList()
  },
  methods: {
    handleClose(tag) {
      this.dataForm.material.splice(this.dataForm.material.indexOf(tag), 1);
    },
    showInput() {
      this.inputVisible = true;
      this.$nextTick(_ => {
        this.$refs.saveTagInput.$refs.input.focus();
      });
    },
    handleInputConfirm() {
      let inputValue = this.inputValue;
      if (inputValue) {
        this.dataForm.material.push(inputValue);
      }
      this.inputVisible = false;
      this.inputValue = '';
    },

    getProjectList() {
      this.$http({
        url: this.$http.adornUrl('/sys/project/list1'),
        method: 'get',
        data: this.$http.adornData()
      }).then(({ data }) => {
        this.projectList = data.projectEntityList
      })
    },
    init(id) {
      this.dataForm.id = id || 0
      this.visible = true
      this.$nextTick(() => {
        this.$refs['dataForm'].resetFields()
        if (this.dataForm.id) {
          this.$http({
            url: this.$http.adornUrl(`/sys/auditMaterial/info/${this.dataForm.id}`),
            method: 'get',
            params: this.$http.adornParams()
          }).then(({ data }) => {
            if (data && data.code === 0) {
              this.dataForm.projectId = data.auditMaterial.projectId
              this.dataForm.conclusionPostpone = data.auditMaterial.conclusionPostpone
              //这里将发回来的字符串转数组
              this.dataForm.material = data.auditMaterial.material.split(',')
            }
          })
        }
      })
    },
    // 表单提交
    dataFormSubmit() {
      this.$refs['dataForm'].validate((valid) => {
        if (valid) {
          this.$http({
            url: this.$http.adornUrl(`/sys/auditMaterial/${!this.dataForm.id ? 'save' : 'update'}`),
            method: 'post',
            data: this.$http.adornData({
              'id': this.dataForm.id || undefined,
              'projectId': this.dataForm.projectId,
              'conclusionPostpone': this.dataForm.conclusionPostpone,
              // 有菜狗不会存数组，这里用数组拼成字符串发送
              'material': this.dataForm.material.join(','),
            })
          }).then(({ data }) => {
            if (data && data.code === 0) {
              this.$message({
                message: '操作成功',
                type: 'success',
                duration: 1500,
                onClose: () => {
                  this.visible = false
                  this.$emit('refreshDataList')
                }
              })
            } else {
              this.$message.error(data.msg)
            }
          })
        }
      })
    }
  }
}
</script>
